<template>
	<div class="container">
		<div class="l-box flex-center">
			<view class="d-box flex-column" v-for="(item, i) in navList" :key="i" @click="itemHandle(item)">
				<image class="icon" :src="item.imageUrl" mode="aspectFill" />
				<text class="title">{{ item.title }}</text>
			</view>
		</div>
		<view class="t-content">
			<view class="n-title flex-space-between">
				<view>团队机具</view>
				<policyFilter myKey="data" @confirm="confirm" :policyCode="query.policyCode"></policyFilter>
			</view>
			<view class="d-box flex">
				<view class="t-num flex-column" v-for="(item, i) in numList" @click="navTo(i)" :key="i">
					<text class="num margin1" >{{ item.value }}</text>
					<text class="title " :style="item.style">{{ item.title }}</text>
				</view>
			</view>
		</view>
		<m-s-footer :tabIdx="0" v-if="$store.state.user.isSpecificAccount"></m-s-footer>
		<m-footer :tabIdx="0" v-else></m-footer>
	</div>
</template>

<script>
import { termTotal } from '_a/terminal';
export default {
	data() {
		return {
			query: {
				policyCode: this.$store.getters.policyList[0] ? this.$store.getters.policyList[0].policyCode : ''
			},
			navList: [
				{
					title: '机具划拨',
					url: '/pages/home/terminal/operation?type=assign',
					imageUrl: require('@/common/images/termial/termial-icon1.png')
				},
				{
					title: '机具回拨',
					url: '/pages/home/terminal/operation?type=back',
					imageUrl: require('@/common/images/termial/termial-icon2.png')
				}
				// ,
				// {
				// 	title: '机具解绑',
				// 	url: '/pages/home/terminal/terminalList',
				// 	imageUrl: require('@/common/images/termial/termial-icon3.png')
				// }
			],
			numList: [
				{
					title: '终端总数',
					value: '0',
					style:{}
				},
				{
					title: '未绑定',
					value: '0',
					style:{color:'#dd524d'}
				},
				{
					title: '已绑定',
					value: '0',
					style:{color:'#4cd964'}
				}
			]
		};
	},
	onShow() {
		this.getData();
	},
	onLoad() {
		// this.query.policyCode = this.$store.getters.policyList[0].policyCode;
	},
	onNavigationBarButtonTap() {
		this.$nav.push({
			path: '/pages/home/terminal/termOperatHistory'
		});
	},
	methods: {
		navTo(i) {
			let path = '/pages/home/terminal/terminalList';
			switch (i) {
				case 0:
					this.$nav.push({
						path: path,
						query: { type: '', policyCode: this.query.policyCode }
					});
					break;
				case 1:
					this.$nav.push({
						path: path,
						query: { type: '2', policyCode: this.query.policyCode }
					});
					break;
				case 2:
					this.$nav.push({
						path: path,
						query: { type: '1', policyCode: this.query.policyCode }
					});
					break;
				default:
					break;
			}
		},
		getData() {
			termTotal({ policyCode: this.query.policyCode ,agentType:1}).then(res => {
				if (res.data.length) {
					let data = res.data[0];
					this.numList[0].value = data.totalTermCount;
					this.numList[1].value = data.totalUnBindTermCount;
					this.numList[2].value = data.totalBindTermCount;
				}
			});
		},
		confirm(code, myKey) {
			this.query.policyCode = code;
			this.getData();
		},
		itemHandle(item) {
			this.$nav.push({
				path: item.url
			});
		}
	}
};
</script>
<style scoped lang="scss">
.container {
	padding-top: R(30);
}
.l-box {
	margin-bottom: R(26);
	justify-content: space-around;
	background: $button-linear-bg;
	margin: R(0) R(25) R(20);
	box-shadow: 0px R(5) R(21) R(3) rgba(13, 133, 244, 0.14);
	border-radius: R(10);
	height: R(220);
	.d-box {
		width: 31%;
		text-align: center;
	}

	.title {
		font-size: R(28px);
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #fff;
	}
	.icon {
		width: R(67);
		height: R(109);
		// font-weight: bold;
		margin: 0 auto R(10);
	}
	.margin1 {
		margin-bottom: R(30);
	}
}
.t-content {
	background: url(../../../common/images/termial/n-bg.png) no-repeat;
	background-size: 100% auto;
	padding: R(34) 0;
	margin: 0 R(25);
	.n-title {
		margin-bottom: R(50);
		padding: 0 R(26);
		font-size: R(30);
		font-weight: 400;
		color: #1a1a1a;
	}
	.d-box {
	}

	.title {
		font-size: R(28px);
		font-weight: 400;
		color: #a6a6a6;
	}
	.num {
		font-size: R(36);
		font-weight: bold;
		color: #1a1a1a;
	}
	.margin1 {
		margin-bottom: R(30);
	}
	.line::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		margin-left: R(-30);
		width: R(60);
		height: 1px;
		background: #eee;
	}
	.t-num {
		width: 31%;
		text-align: center;
		.title {
			// position: relative;
			text-decoration-line: underline;
		}
	}
}
</style>
